import "./index.less";
import { checkupsGroupList, checkupsGroupUpdate, thServicesList } from "@/api/SecondmentDictionary";
import { Button } from "@/components/Button";
import { BasicDrawer, useDrawerInner } from "@/components/Drawer";
import { IconEnum } from "@/enums/appEnum";
import { Checkbox, message, Timeline } from "antd";
import { CheckboxValueType } from "antd/lib/checkbox/Group";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
const { Item } = Timeline;
const index = (props: { register: Fn }) => {
	const { t } = useTranslation();
	let [grpId, serGrpId] = useState("");
	const [plainOptions, setPlainOptions] = useState([]);
	const [checkedValue, setCheckedValue] = useState([]);
	const [servicesDOS, setServicesDOS] = useState([]);
	const [isShow, setIsShow] = useState(false);
	const [registerDrawer, { closeDrawer }] = useDrawerInner(props.register, data => {
		serGrpId((grpId = data.grpId));
	});

	const handleSubmit = async () => {
		console.log(JSON.stringify(checkedValue));
		const res = await checkupsGroupUpdate({
			grpId,
			service: JSON.stringify(checkedValue)
		});
		if (res) {
			message.success(t("kevin_ui.scientific"));
			closeDrawer();
			setIsShow(true);
			return;
		}
		message.error(t("kevin_ui.filter"));
	};
	const onChange = (checkedValues: CheckboxValueType[]) => {
		setCheckedValue(checkedValues);
	};
	const getThServicesList = async () => {
		const res = await thServicesList({ pageSize: 10, pageNo: 1 });
		const list = res.list.map((item: any) => {
			return {
				label: item.svcName,
				value: item.svcId
			};
		});
		setPlainOptions(list);
	};
	const getCheckupsGroupList = async () => {
		const res = await checkupsGroupList(grpId);
		if (res.service) {
			setServicesDOS(res.servicesDOS);
			console.log(JSON.parse(res.service));
			setCheckedValue(JSON.parse(res.service));
			setIsShow(true);
			return;
		}
		setIsShow(false);
	};
	const addProjectFn = () => {
		setIsShow(false);
	};
	useEffect(() => {
		if (grpId) {
			getThServicesList();
			getCheckupsGroupList();
		}
	}, [grpId]);
	return (
		<BasicDrawer showFooter={true} {...props} register={registerDrawer} ok={handleSubmit}>
			<div>
				<div style={{ display: isShow ? "block" : "none" }}>
					<Button type="link" onClick={addProjectFn}>
						New personnel added
					</Button>
					<Timeline>
						{servicesDOS.map((item: any) => {
							return <Item key={item.svcId}>{item.svcName}</Item>;
						})}
					</Timeline>
				</div>
				<div style={{ display: isShow ? "none" : "block" }}>
					<Checkbox.Group value={checkedValue} options={plainOptions} onChange={onChange} />
					<Button type="link" preIcon={IconEnum.ARROW_DOWN}>
						{t("component.table.more")}
					</Button>
				</div>
			</div>
		</BasicDrawer>
	);
};
export default index;
